<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
	<title>Folder tree with Drag and Drop capabilities</title>
	<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)">
<META NAME="Generator" CONTENT="Alf Magne Kalleland (www.dhtmlgoodies.com)">
<meta name="KeyWords" content="Folder tree with drag and drop,folder tree,list based folder tree,tree view,Drag and drop script,DHTML drag and drop,drag,drop">
<meta name="Description" content="A library of DHTML and Ajax scripts">
<meta name="country" content="Norway">
<meta name="organization-Email" content="post@dhtmlgoodies.com">
<meta name="copyright" content="copyright 2005 - Alf Magne Kalleland">
<meta name="coverage" content="Worldwide">
<meta name="revisit_after" content="30days">
<meta name="title" content="A library DHTML and Ajax scripts - DHTMLgoodies.com">
<meta name="identifier" content="http://www.dhtmlgoodies.com/">
<meta name="language" content="English">
<meta name="robots" content="follow">
<meta name="googlebot" content="index, follow">

	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript" src="js/context-menu.js"></script><!-- IMPORTANT! INCLUDE THE context-menu.js FILE BEFORE drag-drop-folder-tree.js -->
	<script type="text/javascript" src="js/drag-drop-folder-tree.js"></script>
	<script type="text/javascript" src="js/utilities.js"></script>

	<link rel="stylesheet" href="css/drag-drop-folder-tree.css" type="text/css"></link>
	<link rel="stylesheet" href="css/context-menu.css" type="text/css"></link>
	<style type="text/css">
	/* CSS for the demo */
	img{
		border:0px;
	}
	</style>
	<script type="text/javascript">
	//--------------------------------
	// Save functions
	//--------------------------------
	var ajaxObjects = new Array();
	
	// Use something like this if you want to save data by Ajax.
	function saveMyTree()
	{
			saveString = treeObj.getNodeOrders();
			var ajaxIndex = ajaxObjects.length;
			ajaxObjects[ajaxIndex] = new sack();
			var url = 'saveNodes.php?saveString=' + saveString;
			ajaxObjects[ajaxIndex].requestFile = url;	// Specifying which file to get
			ajaxObjects[ajaxIndex].onCompletion = function() { saveComplete(ajaxIndex); } ;	// Specify function that will be executed after file has been found
			ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function			
		
	}
	function saveComplete(index)
	{
		alert(ajaxObjects[index].response);			
	}

	
	// Call this function if you want to save it by a form.
	function saveMyTree_byForm()
	{
		document.myForm.elements['saveString'].value = treeObj.getNodeOrders();
		document.myForm.submit();		
	}
	

	</script>
	
</head>
<body>
<br>
	<ul id="dirtree" class="dhtmlgoodies_tree">
		<li id="root" noDrag="true" noSiblings="true" noDelete="true" noRename="true"><a href="javascript:viewFolder('/')">/</a>
			<ul id="0" class="dhtmlgoodies_tree"> </ul>
		</li>
	</ul>
	<form>
	<input type="button" onclick="saveMyTree()" value="Save">
	</Form>
	<script type="text/javascript">	
	treeObj = new JSDragDropTree();
	treeObj.setTreeId('dirtree');
	treeObj.setMaximumDepth(100);
	treeObj.setMessageMaximumDepthReached('Maximum depth reached'); // If you want to show a message when maximum depth is reached, i.e. on drop.
	treeObj.initTree();
	treeObj.expandAll();
	</script>

	<p> Files from the folder will be listed here <p id="files">  </p> </p>
	<p> Prints XML Response for debugging here <p id="debug"> ...  </p> </p>

	<button onclick="javascript:viewFolder('/')">GetSlashList</button>
	<a href="#" onclick="treeObj.collapseAll()">Collapse all</a> | 
	<a href="#" onclick="treeObj.expandAll()">Expand all</a>
	<!-- Form - if you want to save it by form submission and not Ajax -->
	<form name="myForm" method="post" action="saveNodes.php">
		<input type="hidden" name="saveString">
	</form>
</body>
</html>
